<template>
    <div>
      <el-row>
        <el-col :span="2" style="float: left">
          可用资金:{{balance}}
        </el-col>
      </el-row>
        <el-table :data="tableData.slice((query.currentPage - 1) * query.pageSize,query.currentPage * query.pageSize)" style="width: 100%" border :cell-style="cellStyle" @sort-change="changeTabSort">
          <el-table-column prop="code" label="代码" width="180" align="center"/>
          <el-table-column prop="name" label="名称" width="180" align="center"/>
          <el-table-column prop="count" label="股票数量" align="center"/>
          <el-table-column prop="cost" label="总投入" align="center"/>
          <el-table-column  label="成本" align="center"/>

        </el-table>
        <div class="pagination">
          <el-button round type="primary" size="mini" style="margin-top: 2px;float: right" icon="el-icon-refresh" @click=""></el-button>
          <el-pagination  background layout="total,prev,pager,next" :current-page="query.currentPage" :page-size="query.pageSize" :total="dataTotalCount" @current-change="handlerPageChange"/>
        </div>

    </div>
</template>

<script>
export default {
  name: "PostList",
  data(){
    return {

      tableData:[
        {
          code:'000001',
          name:'平安银行',
          cost:100,
          count:10,

        },
        {
          code:'000003',
          name:'惠普银行',
          cost:100,
          count:10,
        },
        {
          code:'000002',
          name:'邮政银行',
          cost:100,
          count:10,
        },

      ],
      balance:200,
      dataTotalCount:4,//总数
      query:{
        currentPage:1,//当前页码
        pageSize:2//每页显示多少条
      }
    }
  },
  methods:{
    handlerPageChange(val){
      this.$set(this.query,'currentPage' , val);
    },
    changeTabSort(column){
      if (column.order == 'descending'){
        this.tableData = this.tableData.sort((a,b)=>{
          b[column.prop] - a[column.prop]
        })
      } else{
        this.tableData = this.tableData.sort((a,b)=>{
          a[column.prop] - b[column.prop]
        })
      }
    },
    cellStyle({row,cloumn,rowIndex,cloumnIndex}){
      return "padding:2px"
    }
  }
  }
</script>

<style scoped>

</style>